<template>
    <div>
        <div class="left-bar"></div>
        <div class="right-bar">
            <div class="title">
                <h1>{{ $store.getters.getSiteTitle }}</h1>
                <p style="font-size: 16px;margin-top: -12px;">Health check-up system management background</p>
            </div>
            <div class="border-bg">
                <div id="in-border">
                    <h2>登录界面</h2>
                    <p style="font-size: 16px;margin-top: -16px;">Login screen</p>
                    <p>账号：<input type="text" v-model="acc"></p>
                    <p>密码：<input type="password" v-model="pwd"></p>
                    <p>验证码：<input type="text" v-model="code"></p>
                    <button class="emailBtn" v-if="isNeedAudit" @click="changeCode">{{emailMsg}}</button>
                    <button class="emailBtn" v-if="!isNeedAudit">重新发送{{seconds}}s</button>

                </div>
                
                <br>
                <el-button @click="doLogin">登录</el-button>
                <el-button @click="doReg">注册</el-button>
                <br>
                <div id="fp">
                    <router-link to="/forgetPwd">忘记密码</router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {setToken} from '@/utils/authToken.js'
export default {
    name:"loginView",
    data(){
        return {
            acc:"",
            pwd:"",
            code:"",
            codeUrl:"",
            isNeedAudit:true,
            emailMsg:"获取邮件验证码",
            seconds: 60,// 秒数
            count: '', //倒计时

        }
    },
    created(){
        // console.log(this.$store)
        if(localStorage.getItem("isClick")==1){
            //说明已经是点击状态
            this.isNeedAudit = false
            this.getRealTime()
            this.Time() //调用定时器

        }else{
            //未点击则将剩余时间设置为一分钟
            this.seconds = 60;
            //将文字消息提示可见
            this.isNeedAudit = true
        }

    },
    methods:{
        doLogin(){
            this.$axios.post(
                "/admin/login",
                {
                    acc:this.acc,
                    pwd:this.pwd,
                    code:this.code
                }
            ).then(res =>{
                console.log("登录",res) //拿到token
                if(res.code == 1){
                    alert("登录成功")
                    // 需要将获取到的token存在cookies里面
                    setToken(res.data.token)
                    // this.$store.dispatch("setAdmin",res.data)
                    this.getAdminFace(res.data.adminInfo.adminId) 
                    this.$router.push("/homepage/welcome")
                    localStorage.setItem("isClick",0)
                }else if(res.code == 0){
                    alert("账号或者密码错误")
                }else if(res.code == 2){
                    alert("验证码错误")
                    // this.changeCode()
                }else if(res.code){
                    this.$message.error("验证码已经过期，请重新获取")
                }
            })
        },
        doReg(){
            this.$router.push("/reg")
        },
        changeCode(){
            this.$message({
                type: 'success',
                message: '验证码发送成功,请到qq邮箱获取验证码!!!'
            })
            //点击了就在本地存储里设置一下
            localStorage.setItem("isClick",1)
            //获取当前时间
            var realTime = new Date();
            //将文字设置改变为倒计时
            this.isNeedAudit = false
            //将
            this.seconds = 60;
            //在当前时间加一分钟，保存到本地存储
            localStorage.setItem("time",realTime.setMinutes(realTime.getMinutes() + 1))
            //发起获取验证码请求
            this.$axios.post(
                "/code/createCode"
            )
            // this.getRealTime();
            this.Time();//调用定时器

        },
        getAdminFace(id){
            this.$axios.get(
                '/admin/getFace',
                {
                    params:{
                        id:id
                    }
                }
            ).then(res =>{
                console.log("获取头像",res)
                localStorage.setItem("adminFace",res.data)
            })
        },
        //获取剩余时间的方法
        getRealTime(){
            //当前时间
            var d1 = new Date();
            //获取本地存储的时间
            var d2 = localStorage.getItem("time");
            // 定义剩余时间
			var d = d2 - d1;
            // 计算剩余秒
			var toSeconds = parseInt(d / 1000 % 60);
            //赋值到定时器
            this.seconds = toSeconds
            console.log(toSeconds)
        },
            // 秒 格式化函数
        countDown() {
            let s = parseInt(this.seconds % 60);
            s = s < 10 ? "0" + s : s
            this.count =  s + '秒'
        },
        //定时器没过1秒参数减1
        Time() {
            var myInterval= setInterval(() => {
                this.seconds -= 1
                this.countDown()
                if(this.seconds === 0 || this.seconds < 0){
                    //如果等于零取消定时
                    clearInterval(myInterval);
                    localStorage.setItem("isClick",0)
                    //让邮箱提示回来
                    this.isNeedAudit = true
                }
            }, 1000)
        },
        
    }
}
</script>
<style scoped>
    .border-bg{
        margin: -2.5em auto 2em;
    }
    
    .title{
        color:rgb(44, 65, 228);
        padding: 5%;
        font-family: "Lucida Calligraphy", cursive, serif, sans-serif;

    }
    p{
        font-size: 20px;
    }
    #in-border{
        padding: 5px;
    }
    #fp{
        margin-top: 5px;
    }
    .emailBtn{
        float: right;
        margin-top: -42px;
        background-color: #086f8e;
        border-radius: 12px;
        border: none;
        color: white;
        padding: 6px 12px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        /* margin: 4px 2px; */
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        cursor: pointer;
    }
    .emailBtn:hover {
        background-color: #fff;
        color: #1795bb;
        border: 1px solid #ccc;
      }
    .text{
        float: right;
        right: 0px;
        width: 50%;
        height: 100%;
        position: absolute;
        overflow: auto;

    }
    .left-bar {
        margin-top: -25px;
        height: 104vh;
        background-image: url("../static/img/loginBgRight.jpg");
        background-size: 100% 100%;
        float: left;
        width: 60%;
        height: 105vh;
        position: absolute;
        overflow: auto;
    }
.right-bar {
    background-image: url("../static/img/loginBgLeft.png");
    background-color: rgb(147, 149, 149);
    float: right;
    right: 0px;
    width: 40%;
    height: 100%;
    position: absolute;
    overflow: auto;
}
</style>